<template>
  <div style="background-color: white">
    <!-- Hero Container -->
    <v-container fluid class="hero-container white--text">
      <v-container class="new-container">
        <v-row dense align="center">
          <v-col cols="12" class="center-horizontal">
            <h1
              class="font-weight-bold mb-5 text-center text-h2"
            >
              我的图图呢-图片素材管理系统
            </h1>
            <p
              class="mb-10 text-subtitle-1"
            >
              集存储、编辑为一体的图片素材管理系统
            </p>
            <v-btn
              rounded
              color="white"
              class="font-weight-medium text-none text-subtitle-1"
              x-large
              :to="isLogin?'/album':'/login'"
              outlined
            >
              现在开始
            </v-btn>
          </v-col>
          <v-col cols="12" class="center-horizontal mt-5">
            <v-btn color="white" text @click="scrollto('success-section', 'mycourses-section')"><v-icon size="40" color="white">mdi-chevron-triple-down</v-icon></v-btn>
          </v-col
          >
        </v-row>
      </v-container>
    </v-container>

    <!--Join Now Section-->
    <v-container
      id="success-section"
      class="new-container"
      :class="{
        'mb-0': $vuetify.breakpoint.smAndDown,
        'mt-0': $vuetify.breakpoint.smAndDown,
        'pb-5': $vuetify.breakpoint.mdAndUp,
        'pt-5': $vuetify.breakpoint.mdAndUp,
      }"
    >
      <v-row
        class="mt-10 mb-10"
        :class="{
          'mb-1': $vuetify.breakpoint.smAndDown,
          'mt-1': $vuetify.breakpoint.smAndDown,
        }"
      >
        <v-col
          md="6"
          sm="12"
          class="center-vertical"
          :class="{
            'center-horizontal': $vuetify.breakpoint.smAndDown,
            'pr-3': $vuetify.breakpoint.smAndDown,
            'pr-16': $vuetify.breakpoint.mdAndUp,
          }"
        >
          <h2
            class="mb-10 mt-10 font-weight-bold text-h3"

          >
            概述
          </h2>
          <p
            class="mb-5 mt-5 font-weight-light text-subtitle-1"
          >
            找到一种合适的存储方案保存图片和一种在web上可以高效处理数字图像的方案。通过vue.js作为前端框架和node.js作为服务端框架分离的开发方式，结合服务器云端对象存储，将用户上传的图片存储在企业级云端服务器，根据用户实际的操作对服务器上的图片进行处理或管理，并且具有图片详细信息预览，让用户感受到互联网的便利，也能为爱好者和企业提供一个功能齐全的交流平台
          </p>
          <v-btn
            x-large
            width="150"
            height="60"
            :to="isLogin?'/album':'/login'"
            color="primary"
            class="white--text mb-10 text-subtitle-1"
            outlined
          >
            现在开始
          </v-btn>
        </v-col>
        <v-col v-if="$vuetify.breakpoint.mdAndUp" md="6">
          <v-img  src="../../assets/example-1.svg" class="rounded-img"></v-img>
        </v-col>
      </v-row>
    </v-container>

    <!--Goals Section-->
    <v-container fluid class="goals-section pt-10 pb-10">
      <v-container class="new-container">
        <v-row
          justify="center"
          align="center"
          class="mt-3"
          :class="{
            'mb-5': $vuetify.breakpoint.xs,
          }"
        >
          <v-col>
            <h2
            class="text-center font-weight-bold text-h3">
              功能简介
            </h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col md="3" sm="6" cols="12">
            <v-card color="rgb(245, 245, 245)" elevation="0" class="text-center pa-5">
              <v-icon size="40" color="primary" class="mb-8">mdi-image-album</v-icon>
              <h3 class="mb-3 text-h5 font-weight-light">
                图片在线预览<br>
                图片按条件筛选<br>
                图片在线查看<br>
                图片保存下载<br>
                ...
              </h3>
            </v-card>
          </v-col>

          <v-col md="3" sm="6" cols="12">
            <v-card color="rgb(245, 245, 245)" elevation="0" class="text-center pa-5">
              <v-icon size="40" color="primary" class="mb-8">mdi-gesture</v-icon>
              <h3 class="mb-3 text-h5 font-weight-light">
                锐化<br>
                模糊<br>
                加水印<br>
                旋转<br>
                ...
              </h3>
            </v-card>
          </v-col>

          <v-col md="3" sm="6" cols="12">
            <v-card color="rgb(245, 245, 245)" elevation="0" class="text-center pa-5">
              <v-icon size="40" color="primary" class="mb-8">mdi-account-multiple</v-icon>
              <h3 class="mb-3 text-h5 font-weight-light">
                团队管理<br>
                权限管理<br>
                成员管理<br>
                ...
              </h3>
            </v-card>
          </v-col>

          <v-col md="3" sm="6" cols="12">
            <v-card color="rgb(245, 245, 245)" elevation="0" class="text-center pa-5">
              <v-icon size="40" color="primary" class="mb-8">mdi-lightbulb</v-icon>
              <h3 class="mb-3 text-h5 font-weight-light">可能会有更多功能...</h3>
            </v-card>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="auto">
            <v-btn
              x-large
              width="150"
              height="60"
              :to="isLogin?'/album':'/login'"
              color="primary"
              class="white--text text-subtitle-1"
              outlined
            >
              现在开始
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-container>

  </div>
</template>

<script>

  export default {
    name: 'Introduce',
    props: {
      isLogin: {
        type: Boolean
      }
    },
    components: {
    },
    data() {
      return {

      }
    },
    methods: {
      scrollto(el, secondaryel) {
        const bodyRect = document.body.getBoundingClientRect().top;
        let element = document.getElementById(el);
        if (element == null) element = document.getElementById(secondaryel);
        const headerOffset = 10;
        const elementPosition = element.getBoundingClientRect().top;
        const offsetPosition = elementPosition - bodyRect;

        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        });
      }
    }
  }
</script>

<style scoped>
  .courses-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .courses-container {
    background-color: rgb(245, 245, 245);
  }
  .hero-container {
    background: url(../../assets/img-home.jpg) center center/cover no-repeat;
    height: calc(100vh - 64px);
    width: 100%;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
    object-fit: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .center-horizontally {
    text-align: center;
    margin: auto;
  }
  .center-horizontal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .center-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .text-large {
    font-size: 5.5rem;
    line-height: 5.5rem;
  }
  .center-horizontally {
    text-align: center;
    margin: auto;
  }
  .center-horizontal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .center-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .text-large {
    font-size: 5.5rem;
    line-height: 5.5rem;
  }
  .goals-section {
    background-color: rgb(245, 245, 245);
  }

  @media (min-width: 1904px) {
    .new-container {
      max-width: 1440px;
      height: calc(100vh - 64px);
    }
  }
</style>
